<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>EventH EventW demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../core/core.js"></script>
<script type="text/javascript" src="../../dom/dom.js"></script>
<script type="text/javascript" src="../../dom/event.w.js"></script>
<script type="text/javascript" src="../../dom/node.c.js"></script>
<script type="text/javascript" src="../../dom/dom_retouch.js"></script>
</head>
<body>
<div style="visibility:hidden;width:10px;height:1000px;position:absolute;">&nbsp;</div>
<h2>1. target, ctrlKey, altKey, shiftKey, keyCode</h2>
<input id="keyboard">
<br />
ctrlKey altKey shiftKey keyCode
<div style="height:50px;overflow:auto;border:1px solid #000;"></div>
<script type="text/javascript">//<![CDATA[
QW.NodeW.g('keyboard').on('keydown', function (e) {
	var next = QW.Dom.nextSibling(e.target, 'div');
	next.innerHTML += e.ctrlKey
		+ '&nbsp;&nbsp;&nbsp;'
		+ e.altKey
		+ '&nbsp;&nbsp;&nbsp;'
		+ e.shiftKey
		+ '&nbsp;&nbsp;&nbsp;'
		+ e.keyCode
		+ '<br />';
	next.scrollTop = next.scrollHeight;
});
//]]></script>
<hr />
<h2>2. layerX, layerY, pageX, pageY</h2>
<script type="text/javascript">//<![CDATA[
var simpleDrag = function (target) {

	var doc = target.document || target.ownerDocument || (target.window || target.defaultView) && target || document;

	var e = new QW.EventW(null, target);

	var twrap = QW.NodeW.g(target);

	var xy = twrap.getXY();
	var x = e.pageX - xy[0], y = e.pageY - xy[1];

	var move = function (e) {
		twrap.setXY(e.pageX - x, e.pageY - y);
	};
	
	var up = function () {
		QW.NodeW.un(doc, 'mousemove', move).un('mouseup', up);
	};

	move(e);

	QW.NodeW.on(doc, 'mousemove', move).on('mouseup', up);
};

document.write('<iframe id="f" marginheight="0" marginwidth="0"></iframe>');
var d = QW.NodeH.g('f').contentWindow.document;
d.open();
d.write('<div style="position:absolute;background:#CCC;width:50px;height:50px;border:none;margin:none;padding:none;" onmousedown="top.simpleDrag(this)">&nbsp;</div>');
d.close();
//]]></script>
<br />
<div style="top:290px;left:400px;position:absolute;background:#000;width:50px;height:50px;border:none;margin:none;padding:none;" onmousedown="simpleDrag(this)">&nbsp;</div>
<hr />
<h2>3. relatedTarget</h2>
<style type="text/css">
#relatedTarget { position:relative; height:50px; width:500px; }
#relatedTarget div.main { width:500px; position:absolute; }
#relatedTarget.show div.main { background-color:#CCC; border:#000 20px solid; }
#relatedTarget.show div.main ul { display:block; }
#relatedTarget.hide div.main { background-color:#E0E0E0; }
#relatedTarget.hide div.main ul { display:none; }
</style>
<div id="relatedTarget" class="hide">
	<div class="main">
		<h3>父亲问我人生有什么追求？</h3>
		<ul>
			<li><a href="javascript:void(0);">我回答金钱和美女，父亲凶狠的打了我的脸</a></li>
			<li><a href="javascript:void(0);">我回答失业与爱情，父亲赞赏的摸了我的头</a></li>
		</ul>
	</div>
</div>
<script type="text/javascript">//<![CDATA[
/*
QW.NodeW.g('relatedTarget').on('mouseover', function (e) {
	var w = QW.NodeW.g(this);
	if (e.relatedTarget && !w.contains(e.relatedTarget)) {
		w.replaceClass('hide', 'show');
	}
}).on('mouseout', function (e) {
	var w = QW.NodeW.g(this);
	if (e.relatedTarget && !w.contains(e.relatedTarget)) {
		w.replaceClass('show', 'hide');
	}
});
*/
QW.NodeW.g('relatedTarget').on('mouseenter', function (e) {
	//alert(1);
	QW.Dom.replaceClass(this, 'hide', 'show');
}).on('mouseleave', function (e) {
	//alert(1);
	QW.Dom.replaceClass(this, 'show', 'hide');
});
//]]></script>
<hr />
<h2>4. detail preventDefault</h2>
<img id="logo" src="http://co.youa.baidu.com/picture/r/mall/css/090518/lg_pt1.gif" alt="detail" />
<script type="text/javascript">//<![CDATA[
QW.NodeW.g('logo').on('mousewheel', function () {
	var w = null
		, rect = null
		, n = 0
		, step = .2;
	return function (e) {
		if (!w) {
			w = QW.NodeW.g(this);
			rect = w.getRect();
		}
		n += e.detail > 0 ? 1 : -1;
		var nw = Math.round(rect.width + rect.width * n * step)
			, nh = Math.round(rect.height + rect.height * n * step);
		w.setInnerSize(nw + 'px', nh + 'px');
		e.preventDefault();
	};
}());
//]]></script>
<hr />
<h2>5. stopPropagation</h2>
<div onmousedown="alert(2);" style="background-color:#000;width:200px; height:50px;">
	<div onmousedown="alert(1);QW.EventH.stopPropagation();" style="background-color:#CCC;width:100px; height:30px;">&nbsp;</div>
</div>
<hr />
<div style="height:500px;"></div>
<div style="left:100px;top:100px;height:100px;width:100px;position:fixed;background-color:#000;" onmousedown="
alert(QW.Dom.getXY(this));
">
</div>
</body>
</html>